<template>
  <div class="content">
    <div class="header">
      <van-search
        v-model="value"
        show-action
        label="北京"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-around;
        "
      >
        <p>热搜:</p>
        <button>北京欢乐谷</button>
        <button>颐和园</button>
        <button>北京野生动物园</button>
      </div>
    </div>
    <div class="main">
      <van-grid :border="false" :column-num="5">
        <van-grid-item
          v-for="(item, index) in tab"
          :key="index"
          @click="goList"
        >
          <van-image :src="item.img" />
          <p>{{ item.title }}</p>
        </van-grid-item>
      </van-grid>
      <div class="swiper">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div>
        <div
          class="main-item"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <h2>北京必玩</h2>
          <span>更多></span>
        </div>
        <div class="tabs">
          <div
            v-for="(item, index) in tabList"
            :key="index"
            style="margin: 10px 10px"
            @click="goDetail(item.id)"
          >
            <img :src="item.src" alt="" />
            <p>{{ item.title }}</p>
            <span>{{ item.word }}</span>
            <van-rate
              v-model="item.count"
              :size="25"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Toast } from 'vant'
import { Lazyload } from 'vant'
import axios from 'axios'
Vue.use(Lazyload)
export default {
  data() {
    return {
      value: '',
      tab: [],
      images: [
        'https://img1.baidu.com/it/u=3953008485,1470810916&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400',
        'https://img.zcool.cn/community/0179b25bbb0a5ea801213dea0a8b3f.jpg@1280w_1l_2o_100sh.jpg',
        'https://img.zcool.cn/community/01f8a85a090dbda80121985c82e61f.jpg@1280w_1l_2o_100sh.jpg',
        'https://picnew13.photophoto.cn/20190331/xialiangjieshenghuodianqipsdhaibaocuxiaodianshanglunbotu-32512684_1.jpg',
      ],
      tabList: [],
    }
  },
  methods: {
    onSearch(val) {
      Toast(val)
    },
    onCancel() {
      Toast('取消')
    },
    async getTab() {
      let resp = await axios.get('/api/tab')
      this.tab = resp.data.tab
    },
    async getTabList() {
      let resp = await axios.get('/api/tabList')
      this.tabList = resp.data.tabList
    },
    goList() {
      this.$router.push('/home/list')
    },
    goDetail(id) {
      this.$router.push(`/detail/${id}`)
    },
  },
  created() {
    this.getTab()
    this.getTabList()
  },
}
</script>
<style lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  .header {
    width: 100%;
    height: 120px;
  }
  .van-swipe {
    width: 100%;
    height: 100px;
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  .tabs {
    width: 100%;
    height: 200px;
    display: flex;
    overflow: scroll;
  }
}
</style>
